<template>
  <div>
    <navbar-app></navbar-app>
    <div class="content-in">
      <div class="img-box">
        <img src="@/assets/images/work/trade-bg01.png" />
        <img src="@/assets/images/work/trade-bg02.png" />
        <img src="@/assets/images/work/trade-bg03.png" />
        <div class="box-row">{{ $t('work.tradeUnion.contentA') }}</div>
        <p>{{ $t('work.tradeUnion.update') }}：[ 2023-03-08 ]</p>
      </div>
      <div class="img-box">
        <div class="box-row">{{ $t('work.tradeUnion.contentB') }}</div>
        <img src="@/assets/images/work/trade-bg04.png" />
        <img src="@/assets/images/work/trade-bg05.png" />
        <img src="@/assets/images/work/trade-bg06.png" />
        <p>{{ $t('work.tradeUnion.update') }}：[ 2023-03-08]</p>
      </div>
      <div class="img-box">
        <img
          :src="
            lang === 'zh'
              ? require('@/assets/images/work/trade-bg10.jpg')
              : require('@/assets/images/work/trade-bg10.png')
          "
        />
        <img
          :src="
            lang === 'zh'
              ? require('@/assets/images/work/trade-bg09.jpg')
              : require('@/assets/images/work/trade-bg09.png')
          "
        />
        <p>{{ $t('work.tradeUnion.update') }}：[ 2023-03-23 ]</p>
      </div>
      <div class="banner mg-t-10">
        <img src="@/assets/images/work/trade-bg11.png" />
      </div>
      <p class="ft-24 mg-t-10">{{ $t('work.tradeUnion.update') }}：[ 2023-03-23 ]</p>
      <div class="img-box">
        <img src="@/assets/images/work/trade-bg12.png" />
        <img src="@/assets/images/work/trade-bg07.png" />
        <img src="@/assets/images/work/trade-bg08.png" />
        <div class="box-row">{{ $t('work.tradeUnion.contentF') }}</div>
        <p>{{ $t('work.tradeUnion.update') }}：[ 2023-03-08 ]</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import NavbarApp from '../navbar_app'

export default {
  components: {
    NavbarApp,
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['lang']),
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.content-in {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
}

.banner {
  display: flex;
  position: relative;
  margin-bottom: 24px;

  img {
    width: 100%;
  }

  p {
    height: 54px;
    background: #0261bc;
    position: absolute;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 54px;
  }

  .posz-01 {
    width: 346px;
    left: 0;
    bottom: 68px;
  }

  .posz-02 {
    width: 346px;
    left: 200px;
    top: 18px;
  }

  .posz-03 {
    width: 420px;
    right: 0;
    bottom: 75px;
  }

  .posz-04 {
    width: 326px;
    left: 0;
    top: 54px;
  }
}

.img-box {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;

  img {
    width: 50%;
  }

  p {
    font-size: 24px;
    margin: 15px 0;
  }

  .box-row {
    width: 50%;
    background: #0261bc;
    color: #fff;
    font-size: 30px;
    height: 402px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
  }
}

.mg-t-10 {
  margin-top: 10px;
}
</style>
